<template>
  <!-- 产品栏目管理 -->
  <div>
    <!-- 头部 -->
    <div class="header">
      <!-- 添加栏目 -->
      <el-button type="primary" size="small" @click="showDialog = true;dialogTitle='添加栏目'">添加</el-button>
    </div>
    <!-- 内容 -->
    <div class="content">
      <el-table :data="tableData" size='small' style="width:100%;height=10px">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="id" label="栏目编号" align="center"></el-table-column>
        <el-table-column prop="name" label="名称" align="center"></el-table-column>
        <el-table-column prop="icon" label="图标" align="center">
          <template slot-scope="scope">
            <div>
              <img :src="scope.row.icon" alt="" style="display:block;height:32px;width:32px; margin:0 auto">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="排序号" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="small" @click="deleteCategory(scope.row.id)">删除</el-button>
              <el-button type="text" size="small" @click="editCategory(scope.row)">编辑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页 -->
    <div class="paginetion">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[2,4,6,10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showDialog"
      width="50%"
      @close="dialogClose"
      >
      <span>
        <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal" >
          <el-form-item label="栏目名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="序号" prop="111">
            <el-input v-model="form.num"></el-input>
          </el-form-item>
          
          <el-form-item label="图标" prop="icon">
            <el-upload
              class="avatar-uploader"
              :action="uploadFileURL"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeUpload">
              <img v-if="imageUrl" :src="form.icon" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer">
        <el-button @click="dialogClose">取消</el-button>
        <!-- 提交表单后 调用重置表单 -->
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {get,post} from '@/utils/request'
//引入文件上传路径 和 文件预览路径
import {showFileURL,uploadFileURL} from '@/utils/config'
export default {
  data() {
    return {
      //上传路径
      uploadFileURL,
      // 控制模态框显示
      showDialog:false,
      // 数据列表
      tableData:[],
      // 当前页
      currentPage:1,
      //页面大小
      pageSize:10,
      //数据总数
      total:0,
      //模态框内的标题
      dialogTitle:'',
      //显示图标路径
      imageUrl:'',
      //提交的表单
      form:{},
      // 模态框验证规则
      rules:{
        name:[
          {
          required:true,
          message:'请填写栏目名称',
          trigger:'blur'
          }
        ],
        num:[
          {
            required:true,
            message:'请填写栏目序号',
            trigger:'blur'
          }
        ],
        icon:[
          {
            required:true,
            message:'请选择栏目图标',
            trigger:'change'
          }
        ]
      },
    };
  },
  computed: {},
  methods: {
    //提交表单
    submitForm(){
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          //发送表单验证请求，提交表单对象，给用户成功提示，刷新页面，调用关闭模态框的方法
          await post('/productCategory/saveOrUpdate',this.form)
          this.$message.success('上传成功')
          this.getTableData()
          this.dialogClose()
        } else {
          console.log('上传失败');
          return false;
        }
      });
    },
    //图片上传成功后调用的函数
    handleAvatarSuccess(res, file){
      this.imageUrl = URL.createObjectURL(file.raw);
      //上传成功后 更新imgURL预览图片的路径
      this.form.icon = showFileURL + res.data.id 
    },
    //上传之前要做的限制
    beforeUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;

      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 3MB!');
      }
      return isLt3M;
    },
    //模态框关闭调用的方法
    dialogClose(){
      // this.$refs['form'].resetFields()
      this.form = {}
      this.imageUrl = ''
    
      this.showDialog = false
    },
    //页面改变
    handleCurrentChange(page){
      this.currentPage = page
    },
    //页面大小改变
    handleSizeChange(size){
      this.pageSize = size
    },
    //获取栏目数据
    async getTableData(){
      let data = {
          page:this.currentPage,
          pageSize:this.pageSize
      }
      let res = await get('/productCategory/pageQuery',data)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    //根据ID删除栏目
    async deleteCategory(id){
      let res = await get('/productCategory/deleteById',{id})
      this.getTableData()
    },
    // 编辑栏目信息
    editCategory(form){
      this.showDialog = true
      this.dialogTitle = '编辑栏目'
      this.form = {...form}
      this.imageUrl = this.form.icon
    }
  },
  created() {
    this.getTableData()
  },
  mounted() {},
};
</script>
<style scoped>
/* 分页区域样式 */
  .paginetion {
    /* margin-top: 20px;
    position: fixed;
    bottom: 40px;
    right: 10px; */
    margin-top: 10px;
    float: right;
  }
  .header{
    margin-bottom: 30px;
  }
</style>